import HtmlWebpackPlugin from 'html-webpack-plugin';
import {CleanWebpackPlugin} from "clean-webpack-plugin";
import {resolve} from 'path';
import webpack from 'webpack';

export default env => {
    console.log('环境变量的值：', JSON.stringify(env));
    const {mode = 'development'} = env;
    return {
        entry: './src/index.ts',
        mode,
        devtool: 'inline-source-map',
        devServer: {
            contentBase: './dist',
        },
        output: {
            filename: '[name].[contenthash].js',
            path: resolve('dist')
        },
        optimization: {
            runtimeChunk: 'single',
            moduleIds: 'deterministic',
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendor',
                        chunks: "all"
                    }
                }
            }
        },
        resolve: {
            extensions: ['ts', 'js', '.tsx']
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    include: resolve('src'),
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /\.jpg$/,
                    include: resolve('images'),
                    use: ['file-loader'],
                },
                {
                    test: /\.tsx?$/,
                    include: resolve('src'),
                    use: 'ts-loader',
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new HtmlWebpackPlugin({
                title: '这是标题',
            }),
            new webpack.ProvidePlugin({
                join: ['lodash', 'join']
            })
        ]
    }
}
